<template>
  <div>
<!--    <el-button-->
<!--      class="addBtn"-->
<!--      type="primary"-->
<!--      size="small"-->
<!--      @click="openAddTop"-->
<!--    >添加顶级节点</el-button-->
<!--    >-->
    <el-tree
      ref="SlotTree"
      :data="setTree"
      :props="defaultProps"
      :expand-on-click-node="false"
      highlight-current
      :node-key="NODE_KEY"
    >
      <div class="comp-tr-node" slot-scope="{ node, data }">
        <!-- 编辑状态 -->
        <template v-if="node.isEdit">
          <el-input
            v-model="data.label"
            autofocus
            size="mini"
            :ref="'slotTreeInput' + data[NODE_KEY]"
            @blur.stop="handleInput(node, data)"
            @keyup.enter.native="handleInput(node, data)"
          ></el-input>
        </template>
        <!-- 非编辑状态 -->
        <template v-else>
          <!-- 名称： 新增节点增加class（is-new） -->
          <span
            :class="[
                    data[NODE_KEY] < NODE_ID_START ? 'is-new' : '',
                    'comp-tr-node--name',
                  ]"
          >
                  {{ node.label }}
                </span>

          <!-- 按钮 -->
          <span class="comp-tr-node--btns">
                  <!-- 新增 -->
                  <el-button
                    type="text"
                    size="mini"
                    @click="appendChild(node, data)"
                  >新增</el-button>

            <!-- 编辑 -->
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleEdit(node, data)"
                  >编辑</el-button>

            <!-- 删除 -->
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleDelete(node, data)"
                    v-show="data.id!==1"
                  >删除</el-button>
                </span>
        </template>
      </div>
    </el-tree>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="addDialogVisible"
      width="30%"
      top="5vh"
      :show-close="true"
      :before-close="addHandleClose"
      :title="addDialogTitle == 'edit' ? '编辑' : '新增'"
    >
      <el-form
        :model="addForm"
        :rules="addRules"
        label-width="80px"
        ref="addRef">
        <el-form-item label="名称" prop="name">
          <el-input size="medium" v-model="addForm.name" placeholder="名称" />
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        		<el-button size="small" @click="addHandleClose">关 闭</el-button>
        		<el-button size="small" type="primary" @click="addData">确 定</el-button>
      		</span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      addType: 1,
      addNode:'',
      startId: null,
      setTree: [
        {
          id: 1, // 或者你的根节点ID
          label: "主类目", // 根节点的名称
          children: [] // 子节点为空数组
        }
      ], // tree数据
      NODE_KEY: "id", // id对应字段
      MAX_LEVEL: 3, // 设定最大层级
      NODE_ID_START: 1, // 新增节点id，逐次递减
      defaultProps: {
        // 默认设置
        children: "children",
        label: "label",
      },
      addDataList: "",
      addForm: {
        name: "",
      },
      addRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      addDialogTitle: "new",
      addDialogVisible: false,
      // 之前遗忘了这个参数 重新补发
      initParam: {
        // 新增参数
        name: "",
        id: 0,
        children: [],
      },
    }
  },
  created() {
    // 初始值
    this.startId = this.NODE_ID_START;
  },
  methods: {
    handleDelete(_node, _data) {
      // 删除节点
      console.log(_node, _data);
      // 判断是否存在子节点
      if (_data.children && _data.children.length !== 0) {
        this.$message.error("此节点有子级，不可删除！");
        return false;
      } else {
        // 删除操作
        let DeletOprate = () => {
          this.$nextTick(() => {
            if (this.$refs.SlotTree) {
              this.$refs.SlotTree.remove(_data);
              this.$message.success("删除成功！");
            }
          });
        };
        // 二次确认
        let ConfirmFun = () => {
          this.$confirm("是否删除此节点？", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              DeletOprate();
            })
            .catch(() => {});
        };
        // 判断是否新增： 新增节点直接删除，已存在的节点要二次确认
        _data[this.NODE_KEY] < this.NODE_ID_START
          ? DeletOprate()
          : ConfirmFun();
      }
    },
    handleInput(_node, _data) {
      // 修改节点
      console.log(_node, _data);
      // 退出编辑状态
      if (_node.isEdit) {
        this.$set(_node, "isEdit", false);
      }
    },
    handleEdit(_node, _data) {
      // 编辑节点
      console.log(_node, _data);
      // 设置编辑状态
      if (!_node.isEdit) {
        this.$set(_node, "isEdit", true);
      }
      // 输入框聚焦
      this.$nextTick(() => {
        if (this.$refs["slotTreeInput" + _data[this.NODE_KEY]]) {
          this.$refs["slotTreeInput" + _data[this.NODE_KEY]].$refs.input.focus();
        }
      });
    },
    // 新增子级节点打开事件
    appendChild(node,data) {
      this.addForm.name = "";
      this.addDialogVisible = true;
      this.addDialogTitle = "new";
      this.addDataList = data;
      this.addNode=node
      this.addType = 2;
    },
    // 新增子级节点
    handleAdd(_node, _data,_name) {
      // 新增节点
      console.log(_node, _data);
      // 判断层级
      if (_node.level >= this.MAX_LEVEL) {
        this.$message.warning("当前已达到" + this.MAX_LEVEL + "级，无法新增！");
        return false;
      }
      // 参数修改
      let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
      obj.id = _data[this.NODE_KEY]; // 父id
      console.log(obj.id)
      obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
      console.log(  obj[this.NODE_KEY])
      obj.label=_name
      // 判断字段是否存在
      if (!_data.children) {
        this.$set(_data, "children", []);
      }
      // 新增数据
      _data.children.push(obj);
      // 展开节点
      if (!_node.expanded) {
        _node.expanded = true;
      }
    },
    // 新增顶级结点打开事件
    handleAddTop() {
      if (this.setTree.length > 0) {
        this.$message.warning("已经存在根节点，不能添加第二个根节点！");
        return;
      }
      // // 添加顶部节点
      // let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
      // console.log(obj);
      // obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
      // obj.label = this.addForm.name;
      // console.log(obj.label)
      // this.setTree.push(obj);
      // 添加顶级节点
      const obj = {
        id: 2, // 分配一个新的ID，或者根据需要进行分配
        label: this.addForm.name, // 使用输入的名称
        children: [] // 子节点为空数组
      };

      this.setTree.push(obj);
      this.addDialogVisible = false;
    },
    // 新增顶级结点
    openAddTop() {
      this.addForm.name = "";
      this.addDialogVisible = true;
      this.addDialogTitle = "new";
      this.addType = 1;
    },
    // 点击确定 新增子级菜单
    addData() {
      var t = this;
      this.$refs.addRef.validate(async (valid) => {
        if (valid) {
          if (t.addType == 1) {
            t.handleAddTop();
            this.addDialogVisible = false;
          } else if (t.addType == 2) {
            const obj = JSON.parse(JSON.stringify(t.addForm));
            // 需要判断新增还是编辑
            t.handleAdd(t.addNode,t.addDataList,obj.name)
            this.addDialogVisible = false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addHandleClose() {
      this.addDialogVisible = false;
      this.$refs.addRef.resetFields();
    },
  }

}
</script>
